<template>
  <div class="box">
    <div id="upry" class="upper-you"></div>
    <div class="wire"></div>
    <div class="centre"></div>
    <div class="small"></div>
    
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["aqi","quality"],
  methods: {
    // 质量图表
    fine() {
        if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //解决echarts dom已经加载的报错
      }
      this.myChart = echarts.init(document.getElementById("upry"));

      //  var colorTemplate1 = [[0.166, "rgba(255,0,0,0.8)"], [0.332, "rgba(0,255,255,0.8)"],[0.498,'pink'],[0.664,'#ccc'],[0.83,'#bababa'], [1, "#07f959"]];
      let option = {
        series: [
          {
            min: 0,
            max: 500,
            splitNumber: 6,
            type: "gauge",
            itemStyle: {
              borderColor: "#0659b6",
              borderWidth: 1,
            },
            axisLine: {
              // 仪表盘轴线(轮廓线)相关配置。
              show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
              lineStyle: {
                // 仪表盘轴线样式。
                color: [[1, "#1b2e64"]], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                width: 18, //轴线宽度,默认 30。
                borderColor: "#0462c2",
                borderWidth: 1,
                borderType: "solid",
              },
            },
            splitLine: {
              show: true,
              distance: -17,
              length: 23,
              lineStyle: {
                color: "#0162d5",
                width: 1,
              },
            },
            // 进度条
            progress: {
              show: true,
              width: 18,

              itemStyle: {
                color: "",
                normal:{
                  label:{
                    show:true
                  }
                }
              },
            },
            axisTick: {
              // 刻度(线)样式。
              show: false, // 是否显示刻度(线),默认 true。
              splitNumber: 6, // 分隔线之间分割的刻度数,默认 5。
              length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
              lineStyle: {
                // 刻度线样式。
                color: "#eee", //线的颜色,默认 #eee。
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                width: 1, //线度,默认 1。
                type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                shadowColor: "#fff", //阴影颜色。支持的格式同color。
              },
            },
            axisLabel: {
              // 刻度标签。
              show: false, // 是否显示标签,默认 true。
              distance: 5, // 标签与刻度线的距离,默认 5。
              color: "#fff", // 文字的颜色,默认 #fff。
              fontSize: 12, // 文字的字体大小,默认 5。
              formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
            pointer: {
              // 仪表盘指针。
              show: false, // 是否显示指针,默认 true。
              length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
              width: 5, // 指针宽度,默认 8。
            },
            title: {
              // 仪表盘标题。
              show: true, // 是否显示标题,默认 true。
              offsetCenter: [0, "20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: "#a3f2ef", // 文字的颜色,默认 #333。
              fontSize: 11, // 文字的字体大小,默认 15。
            },
            detail: {
              // 仪表盘详情，用于显示数据。
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [0, -10], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: "#a4f1f1", // 文字的颜色,默认 auto。
              fontSize: 8, // 文字的字体大小,默认 15。
              formatter: this.quality
            },

            // detail: {
            //     formatter: '{value}'
            // },
            data: [
              {
                value:this.aqi,
                name: this.aqi,
              },
            ],
          },
        ],
      };

      var val = option.series[0].data[0].value;
      
      if (val <=50) {
        option.series[0].progress.itemStyle.color = "rgb(0,228,0)";//优
      } else if (val <=100) {
        option.series[0].progress.itemStyle.color = "rgb(255,255,0)";//良
      } else if (val <=150) {
        option.series[0].progress.itemStyle.color = "rgb(255,126,0)";//轻
      } else if (val <=200) {
        option.series[0].progress.itemStyle.color = "rgb(255,0,0)";//中
      } else if (val <=300) {
        option.series[0].progress.itemStyle.color = "rgb(153,0,76)";//重度
      } else  {
        option.series[0].progress.itemStyle.color = "rgb(126,0,35)";//严重
      }

      this.myChart.setOption(option);
    },

    // 窗口大小改变
    handleResize() {  
      this.myChart.resize(); // 只要窗口大小改变 echarts跟着容器变化
    },
  },
  mounted() {
    // 监听窗口大小改变
    window.addEventListener("resize", this.handleResize);

    this.fine();
  },
  // 
    watch: {
    aqi: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.fine(); // 重新绘制
      },
    },
      quality: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.fine(); // 重新绘制
      },
    },
  },
  // 销毁前
  beforeDestroy() {
    // 解绑事件 [性能优化]
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
}
.upper-you {
  height: 1.875rem;
  width: 1.875rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.centre {
  width: 1rem;
  height: 0.9625rem;
  border-radius: 50%;
  position: absolute;
  left: 0.7rem;
  top: 0.4625rem;
  z-index: -1;
  background-color: #124197;
}
.wire {
  position: absolute;
  top: 0.15rem;
  left: 0.4rem;
  width: 1.575rem;
  height: 1.575rem;
  border-radius: 50%;
  border: 1px solid #06a9d7;
  border-bottom: 1px solid transparent;
}
.small {
  position: absolute;
  top: -11px;
  left: 0.5rem;
  width: 1.375rem;
  height: 1.7625rem;
  border: 0.1875rem solid #1f294d;
  border-radius: 50%;
  box-sizing: border-box;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
</style>